@import '../global/global';

.ring-radio {
  display: none;

  & + label.ring-radio__label {
    content: '';
    position: relative;
    display: inline-block;
    width: 2 * $ring-unit - 2;
    height: 2 * $ring-unit - 2;

    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    background: transparent;
    line-height: $ring-unit * 3;
    vertical-align: middle;

    & + .ring-radio__text-label {
      position: relative;
      top: 1px;
      padding-left: $ring-unit;
    }
  }

  &:not([disabled]) + .ring-radio__label:hover {
    border: 1px solid $ring-link-hover-color;
  }

  &:checked + .ring-radio__label:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    display: inline-block;
    width: $ring-unit;
    height: $ring-unit;

    opacity: 1;
    border-radius: 50%;
    background-color: $ring-blue-color;
  }

  &.ring-radio_black:checked {
    & + .ring-radio__label {
      border-color: $ring-blue-color;
    }

    & + .ring-radio__label:after {
      background-color: #FFF;
    }
  }

  &[disabled]:checked + .ring-radio__label:after {
    background-color: $ring-gray-color;
  }
}
